<template>
  <div v-if="slave.sensors.vars.length">
    <div class="databox">
      <div
        v-for="item in slave.sensors.vars"
        :key="item.id"
        class="itembox"
        :class="
          item.show_type == 11 || item.show_type == 12 ? 'itembox_6' : 'itembox'
        "
      >
        <div class="imgbox">
          <img v-if="item.icon" :src="baseurl + item.icon" class="pic" />
          <img
            v-else
            :src="baseurl + 'static/images/icon/icon1.png'"
            class="pic"
          />
        </div>
        <div
          class="valuebox"
          :class="
            item.show_type == 11 || item.show_type == 12
              ? 'valuebox_6'
              : 'valuebox'
          "
        >
          <div class="roundline" style="position: relative;">
            <span v-if="item.show_type == 1" class="read" title="只读数值">{{
              item.value
            }}</span>
            <span
              v-else-if="item.show_type == 2"
              class="write"
              @click="changeVal(item, 2)"
              title="读写数值，点击可设值"
              >{{ item.value }}</span
            >
            <label
              class="switch switch-green switch-read"
              v-else-if="item.show_type == 3"
              title="只读开关"
            >
              <input
                type="checkbox"
                :checked="item.value == 1 ? true : false"
                :disabled="true"
                class="switch-input"
              />
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            <!-- <el-switch v-else-if="item.show_type==3"
							v-model="item.value" :width="stateWidth"
							class="demo turn" active-color="#13ce66"
							inactive-color="#ccc" active-text="开"
							inactive-text="关" title="只读开关" :disabled="true"
							:active-value="one" :inactive-value="zero">
						</el-switch> -->
            <label
              class="switch switch-green"
              v-else-if="item.show_type == 4"
              title="读写开关，点击操作"
            >
              <input
                type="checkbox"
                :checked="item.value == 1 ? true : false"
                @change="changeState(item, 1, $event)"
                :disabled="false"
                class="switch-input"
              />
              <span class="switch-label" data-on="On" data-off="Off"></span>
              <span class="switch-handle"></span>
            </label>
            <!-- <el-switch v-else-if="item.show_type==4"
							v-model="item.value" :width="stateWidth"
							@change="changeState(item,2)" class="demo turn"
							active-color="#13ce66" inactive-color="#ccc"
							active-text="开" inactive-text="关" title="读写开关，点击操作"
							:disabled="false" :active-value="one"
							:inactive-value="zero">
						</el-switch> -->
            <span
              v-else-if="item.show_type == 5"
              :class="item.value == 1 ? 'yes' : 'no'"
              style="float:left;"
              title="只读状态"
            ></span>
            <span
              v-else-if="item.show_type == 15"
              :class="item.value == 1 ? 'yes' : 'no_grey'"
              style="float:left;"
              title="只读状态(明暗)"
            ></span>
            <div
              v-else-if="item.show_type == 6"
              class="bt_outer"
              @click="changeState2(item, 2)"
              title="读写状态,点击可设值"
            >
              <span
                :class="item.value == 1 ? 'bt_inner_on' : 'bt_inner_off'"
              ></span>
            </div>
            <i
              v-else-if="item.show_type == 7"
              class="el-icon-bell"
              :class="item.value == 1 ? 'alarm_on' : 'alarm_off'"
              title="只读报警"
            ></i>
            <i
              v-else-if="item.show_type == 13"
              class="el-icon-bell"
              :class="
                item.value == 1
                  ? 'alarm_off'
                  : item.value == 0 && equip.is_on == 1
                  ? 'alarm_on'
                  : 'alarm_off'
              "
              title="只读报警(反)"
            ></i>
            <i
              v-else-if="item.show_type == 8 && item.value"
              class="el-icon-message-solid
	                    alarm_on"
              title="读写报警,点击可清除"
              @click="changeState3(item, 2)"
            ></i>
            <i
              v-else-if="item.show_type == 8 && !item.value"
              class="el-icon-message-solid
	                    alarm_off"
              title="读写报警,未报警,不可操作"
            ></i>
            <span
              v-else-if="item.show_type == 9"
              class="read"
              title="只读字符串"
              style="width:100%;"
              >{{ item.value }}</span
            >
            <span
              v-else-if="item.show_type == 10"
              class="write"
              @click="changeVal(item, 2)"
              title="读写字符串，点击可设值"
              style="width:100%;"
              >{{ item.value }}</span
            >
            <el-radio-group
              v-else-if="item.show_type == 11"
              v-model="item.value"
              title="只读多位开关"
              :disabled="true"
            >
              <el-radio
                v-for="(value, key, index) in item.ext_vars"
                :key="index"
                :label="Number(key)"
                class="rad over"
              >
                {{ value }}
              </el-radio>
            </el-radio-group>
            <el-radio-group
              v-else-if="item.show_type == 12"
              v-model="item.value"
              @change="changeState4(item, 2)"
              title="读写多位开关，点击可设值"
              :disabled="false"
            >
              <el-radio
                v-for="(value, key, index) in item.ext_vars"
                :key="index"
                :label="Number(key)"
                class="rad over"
              >
                {{ value }}
              </el-radio>
            </el-radio-group>
            <span
              v-if="item.show_type == 1 || item.show_type == 2"
              :class="item.show_type == 1 ? 'readUnit' : 'writeUnit'"
              >{{ item.unit }}</span
            >
          </div>
          <div class="roundline">
            <!-- <span class="nameLine over" :style="{'color':item.is_virtual==1?'deepskyblue':''}" :title="item.sensor_name">{{item.sensor_name}}</span> -->
            <span class="nameLine over" :title="item.sensor_name">{{
              item.sensor_name
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SensorVarData",
  data() {
    return {
      one: 1,
      zero: 0,
      stateWidth: 56,
      stateWidth_2: 80
    };
  },
  props: [
    "equip",
    "slave",
    "baseurl",
    "changeVal",
    "changeState",
    "changeState2",
    "changeState3",
    "changeState4"
  ]
};
</script>

<style scoped>
@import url("../assets/sensorData.css");
/*以下为开关样式 */
@import url("../assets/newSwitch.css");
</style>
<style scoped>
.switch-label:before,
.switch-label:after {
  line-height: 2px !important;
}
</style>
